<template>
  <el-row>
    <el-col :span="10" :xs="24" :sm="24" :md="24" :lg="16" :xl="16"
      ><div class="grid-content bg-purple">
        <div class="date-box">
          <div class="date">
            <marquee
              scrollamount="5"
              width="400"
              behavior="scroll"
              slide
              alternate
              >{{ timeId }}</marquee
            >
          </div>
          <div>
            <!-- 
             !!!  element ui 有bug el-date-picker 必须align属性 为center 才可以
             -->
            <div class="block">
              <el-date-picker
                @change="changeDate"
                v-model="selectdate"
                align="center"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="MM月dd日"
              >
              </el-date-picker>

               <el-input
               v-model="todoname"
              style="margin-left:10px;"
              type="text"
              :placeholder="`请输入你的名字`"
              @input="updateData"
            >
            </el-input>
            </div>
          </div>
        </div>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item
            v-for="(item, index) in form.logValue"
            :key="index"
            :label="`日志${index + 1}：`"
          >
            <el-input
              type="textarea"
              autosize
              :placeholder="`任务日志${index + 1}`"
              v-model="item.value"
              @input="updateData"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="newLog" type="primary" @click="newLog"
              >新建日志</el-button
            >
            <el-button class="copy_btn" type="primary" @click="copy"
              >复制</el-button
            >
            <el-button type="primary" @click="clearInput()"
              >清空所有文本</el-button
            >
            <el-button
              :data-clipboard-text="form.textarea"
              type="primary"
              @click="logRecord"
              >日志历史</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="11" :xs="24" :sm="24" :md="24" :lg="8" :xl="8"
      ><div class="bg-purple-light">
        <el-input
          type="textarea"
          :rows="23"
          placeholder="日报表"
          v-model="form.textarea"
        >
        </el-input>
      </div>
      <!-- <el-button
        class="copy_btn"
        type="primary"
        @click="$router.push('/SelfAdaption')"
        >走你</el-button
      > -->
    </el-col>

    <!-- 用不用保存到历史记录 -->,
    <el-dialog
      title="保存到历史记录"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>该文本写的非常棒用不用保存到历史记录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="copy_btn"
          :data-clipboard-text="form.textarea"
          @click="cancelCopy"
          >取 消</el-button
        >
        <el-button
          class="copy_btn"
          :data-clipboard-text="form.textarea"
          type="primary"
          @click="copyText"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 抽屉显示历史记录 -->

    <el-drawer
      title="日志历史记录"
      size="50%"
      :visible.sync="drawer"
      :before-close="handleClose"
    >
      <div class="history-content">
        <el-input
          type="textarea"
          :readonly="true"
          :placeholder="`任务日志历史记录`"
          v-model="historyContent"
          @input="updateData"
          :autosize="{ minRows: 2, maxRows: 33 }"
        />
        <div class="footer-btn">
          <el-button
            :data-clipboard-text="historyContent"
            @click="cancelHIStory"
            class="copy_history_btn"
            type="primary"
            >复制</el-button
          >
          <el-button @click="clerAllHistory" type="primary"
            >清楚历史记录</el-button
          >
        </div>
      </div>
    </el-drawer>
  </el-row>
</template>

<script>
// @ is an alias to /src
import Clipboard from "clipboard";
import { pollFetch, formatDate } from "../utils/methes";
export default {
  name: "HomeView",
  data() {
    return {
      value2: "",
      form: {
        logValue: [
          {
            value: "",
            index: 1,
          },
        ],
        textarea: "",
      },
      todoname:'',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      content: "",
      timeId: null,
      selectdate: null,
      logDate: formatDate(new Date(), "MM月DD日"),
      // 缓存的数据
      localStorageFrom: {
        logValue: [],
        textarea: "",
      },
      drawer: false, // 抽屉历史记录
      dialogVisible: false,
    };
  },
  mounted() {
    this.todoname = this.$store.state.todoname
    // 将本地的存储的数据取出来
    this.form.logValue = JSON.parse(localStorage.getItem("content"))
      ? JSON.parse(localStorage.getItem("content")).logValue
      : [];
    this.form.textarea = JSON.parse(localStorage.getItem("content"))
      ? JSON.parse(localStorage.getItem("content")).textarea
      : "";

    console.log("数据打印-data", JSON.parse(localStorage.getItem("content")));

    this.forDate();
    this.timer = window.setInterval(() => {
      setTimeout(() => {
        this.forDate();
      }, 1000);
    }, 1);
  },
  destroyed() {
    window.clearInterval(this.timer);
  },
  methods: {
    // 清空所有输入框
    clearInput(formName) {
      (this.form.logValue = [
        {
          value: "",
          index: 1,
        },
      ]),
        (this.localStorageFrom.logValue = [
          {
            value: "",
            index: 1,
          },
        ]),
        (this.form.textarea = "");
      this.localStorageFrom.textarea = "";
      console.log("dwai", this.form);
      localStorage.setItem("content", JSON.stringify(this.form));
      this.$message({
        type: "success",
        message: `清除ALL表单文本成功`,
      });
    },
    //清除全部历史记录
    clerAllHistory() {
      this.$confirm("你去确定要清除全部的历史记录吗？", "清除历史记录ALL", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("clearHistory");
          this.$message({
            type: "success",
            message: `清除ALL历史记录成功！`,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.drawer = false;
      this.dialogVisible = false;
    },
    // 日志历史记录
    logRecord() {
      this.drawer = true;
    },
    forDate() {
      this.timeId = formatDate(new Date(), "YY年MM月DD日 hh时mm分ss秒");
    },
    newLog() {
      let obj = {
        value: "",
        index: new Date().getTime(),
      };
      this.form.logValue.push(obj);
    },
    updateData() {
      this.$store.commit('saveName', this.todoname)
      let value =
        `${this.todoname}${this.logDate}工作汇报如下\n` +
        this.form.logValue.map(
          (item, index) => `${index + 1}：${item.value}\n`
        );
      this.form.textarea = value.replace(/,/g, "");

      // 将数据缓存起来
      this.localStorageFrom.logValue = this.form.logValue;
      this.localStorageFrom.textarea = this.form.textarea;
    },
    //复制历史记录
    cancelHIStory() {
      let clipboard = new this.$clipboard(".copy_history_btn");
      clipboard.on("success", (e) => {
        this.$message.success("复制全部历史记录成功");
        clipboard.destroy(); // 释放内存
      });
    },
    //取消复制
    cancelCopy() {
      let clipboard = new this.$clipboard(".copy_btn");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
        clipboard.destroy(); // 释放内存
      });
      this.dialogVisible = false;
    },
    // 复制功能
    copyText() {
      let clipboard = new this.$clipboard(".copy_btn");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功并且已将该文本存到历史记录");
        clipboard.destroy(); // 释放内存
      });
      this.$store.commit("pushHistory", this.form);
      this.dialogVisible = false;
    },
    copy() {
      // 打开时候拷贝弹窗
      this.dialogVisible = true;
    },
    // 更改时间
    changeDate() {
      this.logDate = this.selectdate;
      this.updateData();
    },
  },
  // 将数据缓存到本地存储
  watch: {
    localStorageFrom: {
      deep: true,
      // immediate: true,
      handler(oldVal, newVal) {
        console.log(this.localStorageFrom);
        localStorage.setItem("content", JSON.stringify(this.localStorageFrom));
      },
    },
  },
  // 计算属性将数据返回
  computed: {
    historyContent() {
      let res = this.$store.state.copeHistory.map(
        (item) => `${item.textarea}\n\n\n`
      );
      return res.toString().replace(/,/g, "");
    },
  },
  components: {},
};
</script>
<style scoped>
.bg-purple-light {
  width: 400px;
  height: auto;
  border: 1px solid rgb(212, 208, 208);
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 10px;
}
.text {
  text-align: left;
  word-break: break-all;
}
.el-row {
  padding: 20px;
}
.date {
  width: 16rem;
  height: 2rem;
  margin-left: 5rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  margin-right: 10px;
  background-color: transparent;
  font-size: 13px;
  letter-spacing: 0.1em;
  /* 文字的行间距 */
  backdrop-filter: blur(20px);
  color: #fff;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
}
.date-box {
  display: flex;
  align-items: center;
}
.history-content {
  margin-left: 1rem;
  width: 42rem;
  height: auto;
  margin: auto;
}
.footer-btn {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  justify-content: flex-end;
}
.block {
  display: flex;
}
::v-deep .el-form-item__label {
  color: #fff !important;
}
::v-deep .el-drawer__open .el-drawer.rtl {
  width: 100%;
  height: 100vh;
  background-image: url("../../public/4088346521ea474fa21cbc5dad635e93.jpg");

  /* background-image: url("https://image1.3dxia.com/558a56c642bc987a589349a06336d07173eeb1a5_2.jpg"); */

  /* // https://tse3-mm.cn.bing.net/th/id/OIP-C.oR9Pru3HioewUei1JAYOJwHaFy?w=206&h=161&c=7&r=0&o=5&dpr=2&pid=1.7 */

  /* background-image: url('https://pic.imgdb.cn/item/5f1d445b14195aa5949d93fe'); */
  background-repeat: no-repeat;
  background-size: 210% 100%;
  background-position-x: -400px;
}
::v-deep .el-textarea__inner {
  background-color: transparent;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  /* 文字的行间距 */
  backdrop-filter: blur(20px);
  color: #fff;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
}
::v-deep .el-input--prefix .el-input__inner {
  background-color: transparent;
  color: #fff;
}
::v-deep .el-button--primary {
  background-color: transparent;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  /* 文字的行间距 */
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
}
::v-deep #el-drawer__title {
  color: #fff;
}
::v-deep .el-dialog {
  /* background-image: url('../../public/4088346521ea474fa21cbc5dad635e93.jpg'); */

  background-image: url("https://image1.3dxia.com/558a56c642bc987a589349a06336d07173eeb1a5_2.jpg");
  border-radius: 10px;

  /* background-image: url('https://pic.imgdb.cn/item/5f1d445b14195aa5949d93fe'); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position-x: -400px; */
  color: #fff !important;
}
::v-deep .el-dialog__header {
  color: #fff !important;
}
::v-deep .el-input__inner {
  background-color: transparent;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  /* 文字的行间距 */
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
}
</style>
